<template>
  <!-- 登录 -->
  <div>
    <el-table class="partition" border :data="manageData" style="width: 100%">
      <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="bikes.name" label="编号"> </el-table-column>
      <el-table-column prop="bikes.money" label="租金"> </el-table-column>
      <el-table-column prop="date" label="车辆状态">
        <template slot-scope="scope">
          <div v-if="scope.row.bikes.state">正常</div>
          <div v-else>报废</div>
        </template>
      </el-table-column>
      <el-table-column prop="start_date" label="租赁时间"> </el-table-column>
      <el-table-column prop="users.name" label="租赁人"> </el-table-column>
      <el-table-column prop="date" label="是否已经归还">
        <template slot-scope="scope">
          <div v-if="scope.row.end_data">
            是
          </div>
          <div v-else>否</div>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteMange(scope.row._id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getList, deleteRent } from "../../api/rent";
export default {
  name: "typeCreate",
  components: {},
  data () {
    return {
      manageData: [],
    };
  },
  methods: {
    getManage () {
      getList().then((res) => {
        if (res.success) {
          this.manageData = res.result;
        }
      });
    },
    deleteMange (id) {
      deleteRent(id).then((res) => {
        if (res.success) {
          this.getManage();
        }
      });
    },
  },
  mounted () {
    this.getManage();
  },
};
</script>
<style scoped></style>
